<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画模块</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: #f00;
            /* 告诉系统需要执行哪个动画 */
            /* animation:
            name               规定需要绑定到选择器的 keyframe 名称
            duration           规定完成动画所花费的时间，以秒或毫秒计。

            timing-function    规定动画的速度曲线
            linear	动画从头到尾的速度是相同的。	
            ease	默认。动画以低速开始，然后加快，在结束前变慢。
            ease-in	动画以低速开始。
            ease-out	动画以低速结束。
            ease-in-out	动画以低速开始和结束。
            cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

            delay              规定在动画开始之前的延迟。

            iteration-count    规定动画应该播放的次数。


            direction          告诉系统是否需要执行往返动画
            取值:
            normal,     默认的取值, 执行完一次之后回到起点继续执行下一次
            alternate,  往返动画, 执行完一次之后往回执行下一次

            fill-mode;         填充模式
            */
            animation: zz 3s ease-in 0s 3 alternate;
        }
        @keyframes zz{
            from{
                margin-left: 0;
            }
            to{
                margin-left: 500px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>